<template>
    <el-row>
        <el-col :span="24">
            <el-row style="text-align: left; margin: 10px 0">
                <el-col :span="7">ID:<el-input v-model="search.id" style="width: 240px" placeholder="请输入ID" clearable /></el-col>
                <el-col :span="7">用户:<el-input v-model="search.user" style="width: 240px" placeholder="请输入用户" clearable /></el-col>
                <el-col :span="7">内容:<el-input v-model="search.content" style="width: 240px" placeholder="请输入内容" clearable /></el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="sosuo()">搜索</el-button>
                </el-col>
            </el-row>
        </el-col>
        <el-col style="text-align: left; margin: 0 0 10px 0"><el-button type="primary" #default="scope" @click="add(scope)">新增问题</el-button></el-col>
        <el-col>
            <el-table :data="arrayList" border style="width: 80%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header" />
                <el-table-column prop="user" label="用户" align="center" label-class-name="header" />
                <el-table-column prop="content" label="内容" align="center" label-class-name="header" />
                <el-table-column prop="tuser" label="回复人" align="center" label-class-name="header" />
                <el-table-column prop="status" label="状态" align="center" label-class-name="header" />
                <el-table-column prop="time" label="时间" align="center" label-class-name="header" />
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="scope">
                        <el-button type="text" @click="remove(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" :total="10">
            </el-pagination>
        </el-col>
        <el-dialog v-model="show" :title="title" width="600" style="text-align: left">
            <ShanChu :key2="zhuti.id" v-if="title == '提示'" :zhuti="zhuti" @delate="Delate"></ShanChu>
            <XinZeng v-else @add="Add"></XinZeng>
        </el-dialog>
        <el-col style="text-align: left">
            <el-button style="margin-right: 20px" @click="return1">返回</el-button>
        </el-col>
    </el-row>
</template>

<script setup>
    import { onMounted, ref, defineEmits, defineProps, reactive } from "vue";
    import axios from "axios";
    import qs from "qs";
    import ShanChu from "./components2/ShanChu";
    import XinZeng from "./components2/XinZeng.vue";
    let show = ref(false);
    let arrayList = ref([]);
    let title = ref("");
    let zhuti = ref();
    let emits = defineEmits("change2");
    const props = defineProps({
        ids: {
            type: Number
        }
    });
    let id = ref(props.ids);
    console.log(id);

    async function start() {
        let res = await axios.get(
            `http://localhost:8080/zhuti/select?id=${id.value}`
        );
        arrayList.value = res.data.data;
        for (let index = 0; index < arrayList.value.length; index++) {
            const element = arrayList.value[index].time;
            const date = new Date(element);
            arrayList.value[index].time = `${date.getFullYear()}-${(
                date.getMonth() + 1
            )
                .toString()
                .padStart(2, "0")}-${date
                .getDate()
                .toString()
                .padStart(2, "0")} ${date
                .getHours()
                .toString()
                .padStart(2, "0")}:${date
                .getMinutes()
                .toString()
                .padStart(2, "0")}`;
        }
    }
    onMounted(function () {
        start();
    });
    const Delate = async function (data) {
        console.log(data);

        if (data) {
            await axios.post(
                "http://localhost:8080/zhuti/delete",
                qs.stringify({
                    ...data
                })
            );
            let index = arrayList.value.findIndex((item) => item.id == data.id);
            arrayList.value.splice(index, 1);
        }
        show.value = false;
        start();
    };
    const Add = async function (data) {
        if (data) {
            await axios.post(
                "http://localhost:8080/zhuti/add",
                qs.stringify({
                    ...data,
                    dId: id.value
                })
            );
        }
        show.value = false;
        start();
    };
    const remove = function (value) {
        console.log(value);
        title.value = "提示";
        zhuti.value = value.row;

        show.value = true;
    };
    const add = function () {
        show.value = true;
        title.value = "新增";
    };
    const return1 = function () {
        emits("change2");
    };
    const search = reactive({
        id: "",
        user: "",
        content: ""
    });

    const sosuo = async function () {
        let res = await axios.get(
            `http://localhost:8080/zhuti/selectAll?id=${search.id}&user=${search.user}&content=${search.content}`
        );
        console.log(res);
        //修改列表数据
        arrayList.value = res.data;
    };
</script>

<style lang="less" scoped>
</style>